<template>
    <div class="tdContainer">
        <ul v-if="todos.length" class="tdList">
            <!-- 为什么要 :key呢？ 因为在使用 v-for 循环的时候 vue官方要求必须使用 key 作为唯一索引 -->
            <li v-for="item in todos" :key="item.id" class="tdItem">
                <div class="tdItem-main">
                    <input type="checkbox" class="tdToggle" v-model="item.completed">
                    <span class="tdTxt" :class="{ completed: item.completed }"> {{ item.txt }}</span>
                </div>

                <!-- 按钮 -->
                <div class="tdItem-acts">
                    <a @click="delHandler(item)">删除</a>
                </div>
            </li>
        </ul>
        <p v-else style="padding-left: 10px; color: #999;">没有待办清单...</p>
    </div>
</template>

<script>
export default {
    props: ["todos", "delTodo"],
    methods: {
        delHandler(todo) {
            this.$emit('delTodo', todo)
        }
    },
}
</script>

<style>
.tdList {
    list-style: none;
    padding: 0;
    text-align: left;
    background-color: #fff;
    border-radius: 10px;
}

.tdItem{
    padding: 10px 20px 10px 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.tdItem :last-child{
    border-bottom: 0;
}

.tdToggle{
    cursor: pointer;
}

.tdTxt{
    padding-left: 10px;
}

.completed{
    text-decoration: line-through;
    color: #999;
}

.tdItem-acts{
    display: none;
    color: red;
}

.tdItem:hover .tdItem-acts{
    display: block;
}
</style>